<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="remake.css"/>
    <script src="jquery-3.2.1.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="warrper">

</div>

<script>
    var $warrper = $('.warrper');
    for (var i = 0; i < 16; i++) {
        $warrper.append('<div class="line_vertical" id="vertical ' + i + '">');
    }
    for (i = 0; i < 16; i++) {
        $warrper.append('<div class="line_landscape" id="landscape ' + i + '">');
    }

    function getMousePos(event) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        //alert('x: ' + x + '\ny: ' + y);

        return [x, y];
    }


    var vLine = [];
    vLine[0] = 8;
    for (i = 1; i < 17; i++) {
        vLine[i] = vLine[i - 1] + 50;
    }

    var lanLine = [];
    lanLine[0] = 50;
    for (i = 1; i < 17; i++) {
        lanLine[i] = lanLine[i - 1] + 52;
    }

    //todo 获取所有的横纵线坐标.

    function creat(x,y){
        var a=x-15+'px';
        var b=y-13+'px';
        var nope;
        var div;

        for(var i=0;i<mark;i++){
            var $chess = $('#chess'+i+'');
            var oldChessX = $chess.css('left');
            var oldChessY = $chess.css('top');
            if(a===oldChessX && b===oldChessY){
                nope=1;
                break;
            }
        }  //todo  寻找下过的棋子位置 是否与最新的位置相同  如果相同则不做创建
        if(nope!==1){
            if(mark%2===0){
                div = $('<div class="chess" id="chess'+mark+'">')
                    .css('left',x-15)
                    .css('top',y-13);
                $warrper.append(div);
                mark++;
            }else{
                div = $('<div class="chess" id="chess'+mark+'">')
                    .css('left',x-15)
                    .css('top',y-13)
                    .css('border','white solid')
                    .css('backgroundColor','white');
                $warrper.append(div);
                mark++;
            }
        }

    }

    function place(mousePoint) {
        var x = mousePoint[0];
        var y = mousePoint[1];
        var correctX;
        var correctY;
        for( var i =0;i<17;i++){

            if(x===vLine[i]){
                correctX=vLine[i];
                break;
            }
            if(y===lanLine[i]){
                correctY=lanLine[i];
                break;
            }

            if(x<vLine[i] && x>vLine[i-1]){
                if(vLine[i]-x>=x-vLine[i-1]){
                    correctX=vLine[i-1];
                }else{
                    correctX=vLine[i];
                }
            }
            if(y<lanLine[i] && y>lanLine[i-1]){
                if(lanLine[i]-y>=y-lanLine[i-1]){
                    correctY=lanLine[i-1];
                }else{
                    correctY=lanLine[i];
                }
            }
        }



        creat(correctX,correctY);
    }
    var mark=0;


    $warrper.click(function (event) {
        var mousePoint = getMousePos(event);

        place(mousePoint);
    })


</script>
</body>
</html>